<template>
  <div class="login-wrapper">
    <!-- <div class="title">蔡家智慧园区及九大片区安防管理系统</div> -->
    <div class="title">园区管理系统</div>
    <div class="login">
      <div class="login-title">用户登录</div>
      <el-form
        class="data-form"
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="0"
      >
        <el-form-item label="" prop="loginName">
          <el-input
            class="data-input"
            v-model="form.loginName"
            placeholder="请输入用户名"
            :prefix-icon="User"
            @input="handleLoginNameChanged"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="loginPassword">
          <el-input
            class="data-input"
            v-model="form.loginPassword"
            placeholder="请输入密码"
            show-password
            :prefix-icon="Lock"
            @focus="handlePasswordFocused"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="verification">
          <SlideCaptcha @success="onSlideSuccess" @failure="onSlideFailure" />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            label="记住登录状态"
            v-model="form.autologin"
          ></el-checkbox>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
import { useRouter } from 'vue-router'
const router = useRouter()
import { login } from '@/api/manager/systemManage/user.js'
import { getAllDict } from '@/api/manager/systemManage/dict.js'
import { ElMessage } from 'element-plus'
import SlideCaptcha from '@/components/slideCaptcha.vue'

const restoreFromStorage = ref(false)
const form = ref({
  loginName: '',
  loginPassword: '',
  autologin: false,
  verification: '',
})
const formRef = ref()
const rules = ref({
  loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  loginPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  verification: [{ required: true, message: '请先完成校验', trigger: 'blur' }],
})
const handleLoginNameChanged = () => {
  if (restoreFromStorage.value) {
    form.value.loginPassword = ''
    restoreFromStorage.value = false
  }
}
const handlePasswordFocused = () => {
  if (restoreFromStorage.value) {
    form.value.loginPassword = ''
    restoreFromStorage.value = false
  }
}
const onSlideSuccess = () => {
  form.value.verification = true
}
const onSlideFailure = () => {
  form.value.verification = ''
}
const handleLogin = async () => {
  if (!formRef.value) return
  // console.log('handleLogin', form.value)
  // router.push('/screen')
  // return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      const params = {
        loginName: form.value.loginName,
        loginPassword: restoreFromStorage.value
          ? form.value.loginPassword
          : window.btoa(form.value.loginPassword),
      }
      const res = await login(params)
      if (!res.success) {
        ElMessage.error(res.message)
        return
      }
      window.localStorage.setItem('auto_login', form.value.autologin)
      if (form.value.autologin) {
        window.localStorage.setItem('login_name', form.value.loginName)
        window.localStorage.setItem(
          'login_password',
          restoreFromStorage.value
            ? form.value.loginPassword
            : window.btoa(form.value.loginPassword),
        )
      } else {
        window.localStorage.removeItem('login_name')
        window.localStorage.removeItem('login_password')
      }
      ElMessage.success('登录成功')
      const token = res.data.token
      const moduleTree = res.data.moduleTree[0].children
      const buttonList = res.data.buttonList
      delete res.data.token
      delete res.data.moduleTree
      delete res.data.buttonList
      userStore.setUserInfo(res.data)
      userStore.setToken(token)
      userStore.setMenu(moduleTree || [])
      userStore.setPermissions(buttonList || [])
      const dictRes = await getAllDict()
      userStore.setDict(dictRes.data)
      router.push('/screen')
    }
  })
}

onMounted(() => {
  const autoLogin = window.localStorage.getItem('auto_login')
  const savedLoginName = window.localStorage.getItem('login_name')
  const savedLoginPassword = window.localStorage.getItem('login_password')
  if (autoLogin === 'true' && savedLoginName && savedLoginPassword) {
    form.value.autologin = true
    form.value.loginName = savedLoginName
    form.value.loginPassword = savedLoginPassword
    restoreFromStorage.value = true
  }
})
</script>
<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;
  background: url('@/assets/imgs/login-bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .title {
    position: absolute;
    top: 13.88%;
    // left: 275px;
    right: 20%;
    font-family: Source Han Sans CN;
    font-weight: 800;
    font-size: 50px;
    letter-spacing: 20px;
    color: #1989fa;
    font-style: italic;
    background: linear-gradient(0deg, #4576ee 0%, #6297f5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .login {
    position: absolute;
    top: 50%;
    // right: 275px;
    right: 20%;
    transform: translateY(-50%);
    width: 432px;
    height: 530px;
    background: #ffffff;
    box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    box-sizing: border-box;
    padding: 60px 45px;
    &-title {
      width: 100%;
      margin-bottom: 40px;
      font-weight: 500;
      font-size: 18px;
      color: #000000;
      text-align: center;
    }
    .data-form {
      :deep(.el-button) {
        width: 100%;
      }
    }
  }
}
:deep(.el-input) {
  height: 46px;
  border-radius: 4px;
  .el-icon {
    font-size: 20px;
  }
}
:deep(.el-button) {
  width: 100%;
  height: 46px;
  background: linear-gradient(0deg, #4576ee, #6297f5);
  border-radius: 4px;
  margin-top: 14px;
  span {
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
  }
}
:deep(.el-form-item) {
  margin-bottom: 26px;
}
:deep(.el-checkbox) {
  height: 14px;
}
</style>
